<template>
  <slot name='footer' :data="webLanguages">
    <ul>
      <li v-for="(item,index) in webLanguages" :key="index">
        {{item}}
      </li>
    </ul>
  </slot>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      webLanguages: ['HTML', 'CSS', 'JavaScript', 'ES6', 'ElementPlus', 'Vue3.0' ]
    })
  
    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>